<template>
  <div id="tab">
    <keep-alive>
      <router-view class="content"></router-view>
    </keep-alive>
    <van-tabbar class="tab-bottom" v-model="active" :change="changeTab(active)">
        <van-tabbar-item to="shop" icon="shop">王宫</van-tabbar-item>
        <van-tabbar-item to="course" icon="chat">团操</van-tabbar-item>
        <van-tabbar-item to="coursePerson" icon="chat">私教</van-tabbar-item>
        <van-tabbar-item to="appointment" icon="records">我的课程</van-tabbar-item>
        <van-tabbar-item to="vip" icon="member-day-privilege" :info="info">王牌</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'Tab',
  data () {
    return {
      current: 0,
      info: null,
      newMessage: false,
      loadState: [true, false, false, false, false]
    }
  },
  computed: {
    active: {
      get: function () {
        var path = this.$route.path
        switch (path) {
          case '/shop':
            return 0
          case '/course':
            return 1
          case '/coursePerson':
            return 2
          case '/appointment':
            return 3
          case '/vip':
            return 4
          default:
            return 0
        }
      },
      set: function () {
      }
    }
  },
  beforeCreate: function () {
  },
  created () {
    var that = this
    this.$axios.get('/users/' + JSON.parse(localStorage.getItem('user')).id + '/messages/count').then(response => {
      if (response.data) {
        if (response.data.all > 0) {
          that.newMessage = true
          that.info = response.data.all
        }
      }
    })
  },
  methods: {
    changeTab (active) {
      this.loadState[active] = true
      if (active === 3) {
        this.newMessage = false
        this.info = ''
      }
    }
  }
}
</script>
<style lang="postcss" scoped>
.content{
  width: 100%;
  height: 100%;
  margin-bottom: 50px;
}
.tab-bottom{
  background-color: #333;
}
[class*=van-hairline]::after{
  border: 0px;
}
</style>
